// @ts-nocheck
import React, { Component } from 'react';
import {connect} from 'react-redux'
import {nanoid} from 'nanoid'
import {createAddPersonAction} from '../../redux/actions/person'
 
class Person extends Component {

  addPerson = () => {
    const name = this.nameNode.value
    const age = this.ageNode.value*1
    const personObj = {id: nanoid(), name, age}
    // console.log (personObj)
    this.props.addPerson (personObj)
    this.nameNode.value = ''
    this.ageNode.value = ''
  }
  render() {
    return (
      <div>
        <h2>Count组件求和为: {this.props.count} </h2>
        <input ref= {c => this.nameNode = c} type="text" placeholder='输入名字'/>
        <input ref= {c => this.ageNode = c} type="text" placeholder='输入名字'/>
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.Person.map ((p) => {
              return <li key={p.id}>{p.name}--{p.age}</li>
            })
          }
        </ul>
      </div>
    );
  }
}


export default connect(
  state => ({
    Person: state.persons, 
    count: state.count
  }),
  {addPerson: createAddPersonAction }
)(Person);
